import { TableConfigInit } from '@/shared/class'
import { FormType } from '@/shared/enum'
import { h } from 'vue'
import { ElButton, ElImage, ElSwitch } from 'element-plus'
import { ArticleClass } from './controller'
import { Delete, Edit } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

export class ConfigClass {
	router = useRouter()
	articleClass
	constructor(articleClass: ArticleClass) {
		this.articleClass = articleClass
	}
	public config = new TableConfigInit()
	public tableConfig = {
		...this.config.getDefaultConfig(),
		isSelection: true,
		multiple: true,
		sortLabel: '序号',
		pagination: {
			currentPage: 1,
			pageSize: 10,
			onPageChange: () => this.articleClass.onPageChange()
		},
		columns: [
			{
				label: '标题',
				key: 'title',
				minWidth: 150
			},
			{
				label: '摘要',
				key: 'abstract',
				minWidth: 150
			},
			{
				label: '内容',
				key: 'content',
				minWidth: 150,
				slotComponent: scope => {
					return h(
						'span',
						{
							style: {
								color: '#409eff',
								cursor: 'pointer'
							},
							onClick: () => {
								this.router.push({
									path: '/article',
									query: {
										id: scope.row.id
									}
								})
							}
						},
						'详情'
					)
				}
			},
			{
				label: '分类',
				key: 'type',
				minWidth: 100
			},
			{
				label: '标签',
				key: 'tag',
				minWidth: 120
			},
			{
				label: '封面',
				key: 'img',
				minWidth: 150,
				slotComponent: scope => {
					return h(ElImage, {
						loading: 'lazy',
						previewTeleported: true,
						previewSrcList: [`http://ikun-pro-ui.fun:3000/static/${scope.row.img}`],
						fit: 'cover',
						src: `http://ikun-pro-ui.fun:3000/static/${scope.row.img}`,
						style: { width: '100px', height: '50px' }
					})
				}
			},
			{
				label: '作者',
				key: 'username',
				minWidth: 120
			},
			{
				label: '是否发布',
				key: 'publish',
				minWidth: 120,
				slotComponent: scope => {
					return h(ElSwitch, {
						modelValue: scope.row.publish ?? false,
						inlinePrompt: true,
						activeText: '是',
						inactiveText: '否',
						onChange: val => {
							console.log(val)
							this.articleClass.publish({ id: scope.row.id, publish: val })
							scope.row.publish = !scope.row.publish
						}
					})
					// 	return   <el-switch
					// 	v-model="value2"
					// 	class="mb-2"
					// 	style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
					// 	active-text="Pay by month"
					// 	inactive-text="Pay by year"
					// />
				}
			},
			{
				label: '创建时间',
				key: 'createdAt',
				minWidth: 150
			},
			{
				label: '操作',
				key: 'operate',
				minWidth: 150,
				slotComponent: scope => {
					return h('div', [
						h(ElButton, {
							type: 'danger',
							circle: true,
							icon: Delete,
							title: '删除',
							// disabled: scope.row.disabled,
							onClick: () => {
								this.articleClass.delete(scope.row.id)
							}
						}),
						h(ElButton, {
							type: 'primary',
							circle: true,
							title: '编辑',
							icon: Edit,
							// disabled: scope.row.disabled,
							onClick: () => {
								this.articleClass.update(scope.row.id)
							}
						})
					])
				}
			}
		]
	}

	public searchCol = [
		{
			label: '标题',
			key: 'title',
			value: '',
			type: FormType.INPUT
		},
		{
			label: '内容',
			key: 'content',
			value: '',
			type: FormType.INPUT
		}
	]
}
